<script setup>
import {integralTotal, integralBill} from '@/api/integral'
import queIcon from '@/assets/image/qus.png'
import {t} from '@/locales'

const router = useRouter()

const total = ref(0)
const page = ref({
  pageNum: 1,
  pageSize: 10
})
const dataObj = ref({
  total: 0,
  rows: []
})
const loading = ref(false)
const finished = ref(true)

function getTotal() {
  integralTotal().then(r => {
    total.value = r.data
  })
}
function getList() {
  loading.value = true
  finished.value = false
  integralBill(page.value).then(r => {
    const {rows, total} = r
    const ob = {
      1: t('integral.consumption'),
      2: t('integral.reduceOrder'),
      3: t('integral.reset'),
      4: t('integral.orderCancel'),
      5: t('integral.afterSale')
    }
    loading.value = false
    rows.forEach(it => {
      it.typeName = ob[it.billType]
    })
    const rRows = [...dataObj.value.rows, ...rows]
    if(rRows.length < total) {
      page.value.pageNum++
    } else {
      finished.value = true
    }
    dataObj.value = {
      total,
      rows: rRows
    }
  })
}
// 积分规则明细
function ruleInfo() {
  router.push('/integralRule')
}

getTotal()
getList()
</script>

<template>
  <div class="p-integral">
    <p class="title">{{ $t('integral.myPoint') }}</p>
    <div class="info">
      <p class="num">
        {{ $t('integral.ablePoint') }}
        <span>{{ total }}</span>
      </p>
      <div class="rule" @click="ruleInfo">
        {{ $t('integral.rule') }}
        <img :src="queIcon"/>
      </div>
    </div>
    <p class="sub-title">{{ $t('integral.detail') }}</p>
    <div class="list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="$t('commodity.noMore')"
        :loading-text="$t('commodity.loading')"
        @load="getList"
      >
        <div
          class="list-item"
          v-for="it in dataObj.rows"
          :key="it.id"
        >
          <div class="l-p">
            <p>{{ it.typeName }}</p>
            <p>{{ it.createTime }}</p>
          </div>
          <p class="num">{{ it.integral }}</p>
        </div>
      </van-list>
    </div>
  </div>
</template>

<style scoped lang="scss">
.p-integral {
  padding: 16px;
  .title  {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .info  {
    background: #FAFAFA;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 54px;
    font-size: 14px;
    color: #939599;
    padding: 0 16px;
    margin-bottom: 24px;
    .num {
      color: #939599;
      span {
        font-weight: 600;
        font-size: 16px;
        color: #262626;
      }
    }
    .rule {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
        vertical-align: sub;
      }
    }
  }
  .sub-title {
    font-size: 16px;
    margin-bottom: 11px;
  }
  .list {
    .list-item {
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      background: #FAFAFA;
      .l-p {
        p:first-child {
          margin-bottom: 8px;
        }
      }
      .num {
        font-size: 16px;
      }
      &:first-child {
        border-radius:  4px 4px 0 0;
      }
      &:last-child {
        border-radius: 0 0 4px 4px;
      }
    }
  }
}
</style>